<template>
  <view class="container">
    <view class="card">
      <view>
        <!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
        <up-form labelPosition="left" :model="state.model" :rules="state.rules" ref="formRef">
          <up-form-item label="内容:" prop="title" borderBottom ref="titleItem">
            <up-textarea v-model="state.model.title" maxlength="35" count></up-textarea>
          </up-form-item>
          <up-form-item label="价格:" prop="price" borderBottom ref="priceItem">
            <up-input v-model="state.model.price"></up-input>
          </up-form-item>
          <up-form-item label="数量:" prop="num" borderBottom ref="numItem">
            <up-input v-model="state.model.num"></up-input>
          </up-form-item>
          <up-form-item label="类别:" prop="type" borderBottom ref="typeItem">
            <up-radio-group v-model="state.model.type" placement="row" @change="groupChange">
              <up-radio :customStyle="{ marginBottom: '1px', marginRight: '10px' }" v-for="(item, index) in state.types"
                :key="index" :label="item.name" :name="item.name" @change="radioChange" shape="square">
              </up-radio>
            </up-radio-group>
          </up-form-item>
        </up-form>
        <up-button type="success" @click="submit" style="margin-top: 16px;">提交</up-button>
      </view>
    </view>
    <up-toast ref="uToastRef"></up-toast>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import type { MyInfoProps } from '@/utils/page_types'
import { onLoad } from '@dcloudio/uni-app';
import { http } from '@/utils/http';
//const props = defineProps<MyInfoProps>()

onLoad((options: any) => {
  let info = JSON.parse(options.info);
  console.log("update page onload:",info)
  state.model.price = info.price;
  state.model.title = info.title;
  state.model.num = info.num;
  state.model.type = info.type;
  state.model.id = info.id;
  state.model.server=info.server;
})

console.log(uni.$u.test.code('4567', 4));
// 使用 reactive 创建响应式状态  
const state = reactive({
  model: {
    price: '',
    title: '',
    num: '',
    type: '',
    id: '',
    server:''
  },
  types: [
    { name: '出售',type:1 },
    { name: '求购',type:0 },
  ],
  rules: {
    'price': [

      {
        required: true,
        message: '金额为必填',
        trigger: ['blur', 'change'],
      },
      {
        message: '请输入正确金额',
        validator: (rule, value, callback) => {
          return uni.$u.test.amount(value);
        },
        trigger: ['blur', 'change'],
      },
      {
        message: '请填入0.1~99999.99的金额',
        validator: (rule, value, callback) => {
          return uni.$u.test.range(value, [0.1, 99999.99]);
        },
        trigger: ['blur', 'change'],
      }
    ],
    'title': [
      {
        required: true,
        message: '交易信息为必填',
        trigger: ['blur', 'change'],
      },
    ],
    "num": [
      {
        required: true,
        message: '数量为必填',
        trigger: ['blur', 'change'],
      },
      {
        message: '请填入1~10000的数量',
        validator: (rule, value, callback) => {
          return uni.$u.test.range(value, [1, 10000]);
        },
        trigger: ['blur', 'change'],
      }

    ],
    "type": [
      {
        required: true,
        message: '交易类别必填项',
        trigger: ['blur', 'change'],
      }
    ]
  },
  radio: '',
  switchVal: false,
});

// 使用 ref 创建响应式引用  
const formRef = ref();
const priceItem = ref();
const titleItem = ref();
const numItem = ref();
const uToastRef = ref();
const typeItem = ref();


const groupChange = (name) => {
  console.log("groupChange", name)
}

const radioChange = (name) => {
  console.log("radioChange", name)
}

const submit = () => {
  console.log(state.model);
  formRef.value.validate().then(async valid => {
    if (valid) {
     // uni.$u.toast('校验通过')
      //todo 提交修改
      const data = await http<null>({
        url: "/information",
        data: {
          sdInfoId: state.model.id,
          title:state.model.title,
          price: parseFloat(state.model.price),
          type:state.model.type=='出售'?'1':'0',
          server:state.model.server.toString(),
          num:parseInt(state.model.num)
        },
        method: "PUT"
      });
      if(data.code==1000){
        var url:string;
        if(state.model.type=='出售'){
          url='mysell'
        }else{
          url='mybuy'
        }
        uni.redirectTo({
					url:url

				})
      }
    } else {
      uni.$u.toast('校验失败')
    }
  }).catch(() => {
    // 处理验证错误  
    uni.$u.toast('校验 出错，失败')
  });
}

</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  /* 将表单置顶 */
  height: 100vh;
  padding: 20px;
  background-color: #f5f5f5;
}

.card {
  width: 100%;
  max-width: 400px;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
  display: flex;
  flex-direction: column;
}

.infotitle {
  margin-bottom: 16px;
}
</style>